<script setup lang="ts">
import { get, post } from '@/utils/service'
import { VUE_APP_BASE_API } from '@/utils/baseConfig'
import { ref } from 'vue'
import { showConfirmDialog, showNotify } from 'vant'
import router from '@/router'
// 定义组件参数
const props = defineProps({
  active: {
    type: String,
    required: true,
  },
  recommendCustomerView: {
    type: Object,
  },
  updateDeleteNum: {},
})
const recommentCustomerLists = ref([])
const loading = ref(false)
const finished = ref(false)
const noEmpty = ref(false)

const activeL = ref(props.active)
const page = ref(1)
const limit = 10
function onLoad() {
  queryData()
}

function queryData() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  get('/recommendCustomerWechatNew/queryMyRecommendCustomerList', {
    limit: limit,
    page: page.value,
    tradeStatus: activeL.value,
  })
    .then((res) => {
      if (res.code === 0) {
        // 正常返回数据
        loading.value = false
        noEmpty.value = false
        res.data.forEach((item) => {
          recommentCustomerLists.value.push({
            ...item,
          })
        })
        if (page.value == res.totalPage) {
          loading.value = true
          finished.value = true
          noEmpty.value = false
        } else {
          page.value++
        }
      } else {
        //其他返回数据情况
        if (res.count > 0) {
          //有数据情况
          if (res.code == 201) {
            loading.value = true
            finished.value = true
            noEmpty.value = false
          }
        } else {
          //无数据情况
          loading.value = true
          finished.value = true
          noEmpty.value = true
        }
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
const emit = defineEmits(['updateDeleteNum'])
function deleteBy(dbid) {
  recommentCustomerLists.value.filter((item) => item.dbid == dbid)
  showConfirmDialog({
    title: '删除确认',
    message: '确定删除选择客户吗',
  })
    .then(() => {
      get('/recommendCustomerWechatNew/deleteByCustomerId', {
        reccomendCustomerId: dbid,
      }).then((res) => {
        if (res.code === 0) {
          showNotify({ type: 'success', message: '删除成功', duration: 3000 })
          setTimeout(() => {
            const index = recommentCustomerLists.value.findIndex((item) => item.dbid == dbid)
            recommentCustomerLists.value.splice(index, 1)
            const recommendCustomerView = props.recommendCustomerView
            recommendCustomerView.reccommendTotalNum--
            emit('updateDeleteNum', recommendCustomerView)
          }, 3000)
        } else {
          showNotify({ type: 'danger', message: res.msg, color: '#FFF', background: '#797979' })
        }
      })
    })
    .catch(() => {
      // on cancel
    })
}
function detailTo(customerId: number) {
  router.push('/myRecommendCustomerDetail?customerId=' + customerId)
}
</script>
<template>
  <van-empty
    v-if="noEmpty == true"
    :image="VUE_APP_BASE_API + '/images/vue/noData.png'"
    image-size="100"
    description="暂无数据"
  />
  <van-list
    v-else
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div
      class="recommendCustomerContent"
      v-for="recommendCustomer in recommentCustomerLists"
      :key="recommendCustomer.dbid"
    >
      <div class="recommendCustomerHeadr">
        <div class="recommendCustomerTitle">姓名：{{ recommendCustomer.name || 无 }}</div>
        <div class="recommendCustomerTitle">联系电话：{{ recommendCustomer.mobilePhone }}</div>
      </div>
      <div class="recommendCustomerInnerItem" @click="detailTo(recommendCustomer.dbid)">
        <div class="recommendCustomerInnerItemImg">
          <img :src="VUE_APP_BASE_API + '/images/vue/recommendCar.png'" />
        </div>
        <div class="recommendCustomerInnerItemContent" @click="detailTo(recommendCustomer.dbid)">
          <van-cell-group
            style="
              --van-cell-line-height: 18px;
              --van-cell-label-font-size: 12px;
              --van-cell-vertical-padding: 6px;
              --van-cell-value-font-size: 12px;
            "
          >
            <van-cell
              title="推荐时间"
              :value="recommendCustomer.recommendDate.replace(' 00:00:00', '')"
            />
            <van-cell
              title="门店"
              :value="recommendCustomer.acceptEnterpriseName || '无'"
              ellipsis
              class="van-cell"
            />
            <van-cell title="品牌" :value="recommendCustomer.brandName || '无'" />
            <van-cell
              title="审批状态"
              :value="recommendCustomer.approvalStatusName"
              style="--van-cell-value-color: var(--main-color)"
            />
            <van-cell
              title="交易状态"
              :value="recommendCustomer.tradeStatusName"
              style="--van-cell-value-color: var(--main-color)"
            />
          </van-cell-group>
        </div>
      </div>
      <div>
        <hr class="hrdashed" />
        <van-cell-group
          v-if="recommendCustomer.approvalStatus >= 2"
          style="
            --van-cell-line-height: 18px;
            --van-cell-label-font-size: 12px;
            --van-cell-value-font-size: 12px;
          "
        >
          <van-cell
            title="审批人"
            :value="recommendCustomer.approvalUser"
            title-class="title-class"
            value-class="value-class"
          />
          <van-cell
            title="审批时间 "
            :value="recommendCustomer.approvalDate.replace(' 00:00:00', '')"
          />
          <div v-if="recommendCustomer.approvalStatus == 3">
            <van-cell title="无效原因" :value="recommendCustomer.flowReasonName" />
            <van-cell title="备注" :value="recommendCustomer.flowNote || '无'" />
          </div>
          <div v-if="recommendCustomer.tradeStatus == 2">
            <van-cell
              title="成交时间"
              :value="recommendCustomer.fileTime.replace(' 00:00:00', '')"
            />
          </div>
        </van-cell-group>
        <div class="recommendCustomerOper" v-else>
          <!--等等处理-->
          <div class="oprLeft">
            <van-button type="primary" class="buttCancel" @click="deleteBy(recommendCustomer.dbid)"
              >删除</van-button
            >
          </div>
          <div class="oprRight">
            <van-button
              type="success"
              class="buttEdit"
              :to="'/recommendCustomer?customerId=' + recommendCustomer.dbid"
              >修改</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <br />
  </van-list>
</template>
<script lang="ts" setup></script>
<style lang="css" scoped>
.van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
  border-width: 0ch;
}
</style>
